<template>
  <div class="container">
    <div class="monitoring">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-radio v-model="form.radioData" label="日">按日期：</el-radio>
          <el-date-picker v-model="form.valueDay" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="form.radioData" label="月">按月份：</el-radio>
          <el-date-picker v-model="form.valueMonth" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
        </el-form-item>
        <el-button size="mini" type="primary" @click="getlistdata">查 询</el-button>
        <el-button size="mini" type="success" @click="getlistdata">导 出</el-button>
      </el-form>
    </div>
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
      <el-table-column prop="ClientName" label="区域名称" align="center"></el-table-column>
      <el-table-column prop="SwillVehicleNumber" label="泔水车次（趟）" align="center"></el-table-column>
      <el-table-column prop="SwillTonnages" label="泔水吨数（吨）" align="center"></el-table-column>
      <el-table-column prop="WasteOilVehicleNumber" label="废油脂车次（趟）"></el-table-column>
      <el-table-column prop="WasteOilTonnages" label="废油脂吨数（吨）"></el-table-column>
      <el-table-column prop="DailyTonnages" label="日均吨数" v-if="isMonth"></el-table-column>
      <el-table-column prop="TotalTonnages" label="总吨数"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 20,    //    每页的数据
      form: {
        radioData: '日',
        valueDay: '',
        valueMonth: ''
      },
      isMonth: false,
      tableData: []
    }
  },
  created () {
    this.form.valueDay = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
    this.form.valueMonth = formatDate(new Date(), 'yyyy-MM')
    this.getlistdata()
  },
  methods: {
    async getlistdata () {
      var date = ''
      if (this.form.radioData === '日') {
        date = this.form.valueDay
        this.isMonth = false
      }
      if (this.form.radioData === '月') {
        date = this.form.valueMonth
        this.isMonth = true
      }
      // var url = 'DataListCompany/GetWeightTJApi?ClientNo=00000&Date=2020-12-19&Type=&DateType=日'
      var url = '/DataListCompany/GetWeightTJApi?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Date=' + date + '&Type=&DateType=' + this.form.radioData
      console.log('url=' + url)
      const { data } = await this.$Http.get(url)
      this.tableData = data
    },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped lang="less">
.monitoring {
  .el-form-item__content {
    max-width: 100px;
  }
  height: 100%;
  // position: relative;
  .el-form {
    width: 100%;
    height: 60px;
    overflow: hidden;
    .el-form-item {
      display: inline-block;
      margin-right: 20px;
      .el-input {
        height: 22px;
      }
    }
    .el-radio {
      margin-right: 10px;
    }
    .el-button {
      padding: 0 8px;
      height: 26px;
      border-radius: 2px;
      display: inline-block;
      margin: 0 20px;
      /deep/span {
        font-size: 14px;
        // margin-left: 4px;
        line-height: 22px;
      }
    }
  }
}
</style>